<template>
  <div class="details bgImg">
    <div class="body">
      <!-- 详情标题 -->
      <h1 class="title">{{detail.title}}</h1>
      <!-- 管理员信息 -->
      <div class="detail-user">
        <!-- 头像 -->
        <img :src="user.avatar" alt="" class="user-avatar">
        <!-- 昵称 -->
        <span>{{user.nickname}}</span>
        <!-- 时间 -->
        <i class="iconfont icon-dian"></i>
        <img src="/static/img/tubiao/日期.png" alt="" class="detail-user-tubiao">
        <span>{{detail.data_time}}</span>
        <!-- 阅读次数 -->
        <i class="iconfont icon-dian"></i>
        <img src="/static/img/tubiao/查看.png" alt="" class="detail-user-tubiao">
        <span>本文共{{detail.readAmount}}次阅读</span>
        <!-- 统计字数 -->
        <i class="iconfont icon-dian"></i>
        <img src="/static/img/tubiao/统计.png" alt="" class="detail-user-tubiao">
        <span>字数统计：约{{detail.length}}字</span>
        <!-- <span>字数统计：约{{strings.Count(detail.content)}}字</span> -->
        <!-- 阅读时长 -->
        <i class="iconfont icon-dian"></i>
        <img src="/static/img/tubiao/咖啡.png" alt="" class="detail-user-tubiao">
        <span>阅读时长 {{hours}}:{{minutes}}:{{seconds}}</span>
      </div>
      <div class="bodys">
        <div class="body-content">
          <!-- 文章部分 -->
          <p style="text-indent:2em;">{{detail.content}}</p>
          <!-- 点赞收藏部分 -->
          <div class="cmesc-praise">
            <!-- 点赞部分 -->
              <div>
                <el-button type="text" class="iconfont icon-aixin_shixin" :class="detail.dp_isPraise==null?'praise-gray':'praise-red'" @click="getPraise(detail)"></el-button>
                <span>{{detail.dPraiseCount}}</span>
              </div>
              <!-- 收藏部分 -->
              <div>
                <el-button type="text" class="iconfont icon-shoucang1" @click="getCollect(detail)" :class="detail.dc_IsCollect==null?'praise-gray':'praise-red'" v-preventReClick></el-button>
                <span>{{detail.dCollectCount}}</span>
              </div>
          </div>
          <!-- 留言评论部分 -->
          <message v-if="flag" topicType="详情" :typeId="id"></message>
        </div>
      </div>
    </div>

  </div>
</template>
<script>
import message from '../comments/message.vue'
export default {
  inject:['reload'],//注入App里的reload方法
 components:{
    message
  },
data(){
  return {
    detail:{},
    user:{
      nickname:"kenan",
      avatar:"/static/img/avatar/8.jpg",
    },
    id:'',
    flag:false,
    hours: 0,
    minutes: 0,
    seconds: 0,
    clickCount:0,
    isLogin:"",
    user_id:"",
  }
},
watch: {
  second: {
    handler (newVal) {
      this.num(newVal)
    }
  },
  minute: {
    handler (newVal) {
      this.num(newVal)
    }
  },
  hour: {
    handler (newVal) {
      this.num(newVal)
    }
  }
},
computed:{
  second: function () {
    return this.num(this.seconds)
  },
  minute: function () {
    return this.num(this.minutes)
  },
  hour: function () {
    return this.num(this.hours)
  }
},
mounted(){
  this.isLogin = this.$store.getters.getShow;
  if(this.isLogin){
    this.user_id = this.$store.getters.getUser.user_id;
  }
  this.id = this.$route.query.id;
  this.flag = true;
  this.getHomeDetail(this.user_id,this.id);
  this.getBlogger();
  this.cutTimeDown();
},
methods:{
  // 获取博文详情
  async getHomeDetail(user_id,data_id){
    const {data:res} = await this.$http.post("getDataDetail",{user_id,data_id});
    console.log(res);
    if(res.status != 200){
        this.$message.error('获取数据失败');
    }else{
      this.detail = res.message[0];
      this.detail.length = this.detail.content.length;
      // console.log("字符串长度："+this.detail.content.length);
    }

  },
  // 获取博主信息
  async  getBlogger(){
    const {data:res} = await this.$http.get("getBloggerMes");
    if(res.status != 200){
        this.$message.error('获取数据失败');
    }else{
      this.user = res.message[0];
      // this.user.avatar = 'data:image/jpeg;base64,'+this.user.avatar;
      // console.log(this.user);
    }
  },
  // 点赞
  async getPraise(item){
    var isLogin = this.$store.getters.getShow;
    if(isLogin==false){
      this.$message('叮叮，要先登录才能点赞哦');
      this.$router.push('/login');
    }else{
      // this.clickCount++;
      this.dataPraiseMes(item);
      let mesObj = {};
      mesObj.data_id = item.data_id;
      mesObj.dataPraise = item.dp_isPraise;
      mesObj.dPraiseCount = item.dPraiseCount;
      // console.log(mesObj);
      mesObj = JSON.stringify(mesObj)
      // if(this.clickCount>=1 && this.clickCount<5){
        // 第一步：更改数据表里面dataPraise的true或者false
        const {data:updateRes} = await this.$http.post("updateDataPCount",{mesObj});
        if(updateRes.status != 200){
          this.$message.error('点赞失败');
        }else{
          this.$message({
            message: '叮叮 操作成功',
            type: 'success'
          });
        }
      // }else if(this.clickCount==5){
      //   this.$message({
      //     message: '警报警报，有人一直点我',
      //     type: 'warning'
      //   });
      // }else if(this.clickCount>5){
      //   this.$message({
      //     message: '不要再点我啦，快去看看其他内容吧',
      //     type: 'warning'
      //   });
      // }
    }

    // this.reload();
    this.getHomeDetail(this.user_id,this.id);
  },
  // datapraise表添加或删除信息
  async dataPraiseMes(item){
    console.log(item);
    // 首先查询表中是否有该条数据，无则加，有则删
    let data_id = item.data_id;
    let user_id = this.user_id;
    const {data:res} = await this.$http.post("selDataPraiseMes",{data_id,user_id});
    console.log(res);
    if(res.status != 200){
      this.$message.error('查询数据失败');
    }else{
      let dPArr = res.message;
      let newPraise = {};
      newPraise.dataP_id = item.data_id;
      newPraise.dp_userId = this.user_id;
      newPraise.dataPraise_time = this.fileType.changeDate(new Date());
      newPraise = JSON.stringify(newPraise);
      console.log(newPraise);
      if(dPArr.length==0){
        // console.log("没有该数据");
        if(item.dp_isPraise==null){
          console.log("添加");
          // this.addPraise(newPraise);
          const {data:addRes} = await this.$http.post("insertDataPraise",{newPraise});
        }
      }else{
        // console.log("有该数据");
        if(item.dp_isPraise==null){
          console.log("修改");
          // this.editPraise(newPraise);
          const {data:deitRes} = await this.$http.post("updateDataPraise",{newPraise});
        }else{
          console.log("删除");
          // this.delPraise(item.data_id,this.user_id);
          const {data:delRes} = await this.$http.post("delDataPraise",{data_id,user_id});
        }
      }
    }
  },
  // 收藏
  async getCollect(item){
    // console.log(item);
    var isLogin = this.$store.getters.getShow;
      // console.log(isLogin);
      // console.log(this.message);
      if(isLogin==false){
        this.$message('叮叮，要先登录才能收藏哦');
        this.$router.push('/login');
      }else{
        // console.log(item);
        // let mes_id = item.mes_id;
        // let praiseType = item.praiseType;
        // let praiseCount = item.praiseCount;
        this.dataCollectMes(item);
        let mesObj = {};
        mesObj.data_id = item.data_id;
        mesObj.dataCollect = item.dc_IsCollect;
        mesObj.dCollectCount = item.dCollectCount;
        // console.log(mesObj);
        mesObj = JSON.stringify(mesObj)
        // 第一步：更改数据表里面praise的true或者false
        const {data:updateRes} = await this.$http.post("updatedcCount",{mesObj});
        if(updateRes.status != 200){
          this.$message.error('收藏失败');
        }else{
           this.$message({
            message: '操作成功 不要频繁点击哦 我可是会反击的',
            type: 'success'
          });
        }
      }
      // this.reload();
      this.getHomeDetail(this.user_id,this.id);
  },
  async dataCollectMes(item){
    console.log(item);
    let data_id = item.data_id;
    let user_id = this.user_id;
    const {data:res} = await this.$http.post("selDataCollectMes",{data_id,user_id});
    if(res.status != 200){
       this.$message.error('查询数据失败');
    }else{
      let dcArr = res.message;
      let newCollect = {};
      newCollect.dataC_id = item.data_id;
      newCollect.dc_userId = this.user_id;
      newCollect.dataCollect_time = this.fileType.changeDate(new Date());
      newCollect = JSON.stringify(newCollect);
      console.log(newCollect);
      if(dcArr.length==0){
        if(item.dc_IsCollect==null){
          console.log("添加");
          const {data:addRes} = await this.$http.post("insertDataCollect",{newCollect});
        }
      }else{
        console.log("有该数据");
        if(item.dc_IsCollect==null){
          console.log("修改");
          const {data:editRes} = await this.$http.post("updateDataCollect",{newCollect});
        }else{
          console.log("删除");
          const {data:addRes} = await this.$http.post("delDataCollect",{data_id,user_id});
        }
      }
    }
  },
  num (n) {
    return n < 10 ? '0' + n : '' + n
  },
  // 计时器
  cutTimeDown () {
    var that = this
    var timer = window.setInterval(function () {
       if((that.seconds<59&&that.seconds>=0) && that.hours<24){
        that.seconds += 1;
      }else if(that.seconds==59&& that.minutes>=0&& that.minutes < 59 && that.hours<24){
        that.seconds  = 0;
        that.minutes += 1;
      }else if(that.seconds==59 && that.minutes == 59 && that.hours<24){
        that.seconds  = 0;
        that.minutes = 0;
        that.hours += 1
      }else if(that.hours>=0&&that.hours<24){
        that.hours += 1;
      }else if(that.hours==24){
        that.$message({
          message: '您已经在这里停留超过一天了，要注意休息哦',
          type: 'warning'
        });
        clearInterval(timer)
        that.$router.push("/home");

      }
    }, 1000)
  }
}
}
</script>
<style scoped>
.details {
  padding: 200px 0;
}
.detail-user {
  display: flex;
  align-items: center;
  color:#f4f4f5;
  font-size: 13px;
}
.user-avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin: 0px 5px;
  border: 2px solid rgba(0,0,0,.2);
}
.detail-user-tubiao {
  width: 25px;
  height: 25px;
}
.bodys {
  width: 100%;
  background-color: #f6f3ef;
}
.body-content {
  width: 700px;
  margin: 20px auto;
}
/* 点赞部分 */
.cmesc-praise {
  display: flex;
  flex-direction: row-reverse;
  /* background-color: red; */
  margin: 20px 0;
  font-size: 12px;
}
.cmesc-praise>div {
  margin: 0 5px;
}
.praise-gray {
  color: #c0c4cc;
}
.praise-red {
  color: pink;
}
</style>
